<template>
  <view>
    <u-navbar title="工单详情" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view>
      <!-- tabs 切换 -->
      <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
        <u-tabs :bold="false" :current="tabsCurrent" :is-scroll="false" :list="list" active-color="#2D8CF0"
          bar-height="10" :bar-width="barWidth" duration="0" @change="change"></u-tabs>
        <u-line color="#CCCCCC" length="94%" margin="-5rpx 0 0 20rpx" />
      </view>

      <view v-if="tabsCurrent === 0">
          <RepairInfo
          v-if="mode === TO_ACCEPT_MODE.VIEW"
          :work-order-id="workOrderId"
          :style="{minHeight: `calc(100vh - ${top}px)`}"
          @edit="mode = TO_ACCEPT_MODE.EDIT"
          />

          <RepairForm
          v-else
          :work-order-id="workOrderId"
          :style="{minHeight: `calc(100vh - ${top}px)`}"
          @cancel="mode = TO_ACCEPT_MODE.VIEW"
          />

      </view>
      <!-- tabs 维修详情 -->
      <view v-else>
        <ChildFixDetail :workOrderInfo="workOrderInfo" />
      </view>

    </view>

  </view>
</template>

<script>
import subTitle from "@/components/SubTitle/SubTitle";
import ChildFixDetail from "./components/child-fix-detail.vue";
import RepairInfo from "./components/RepairAllOrder/info.vue";
import RepairForm from "./components/RepairAllOrder/form.vue";

import getNavBarHeight from "@/mixins/getNavBarHeight";
import { workOrderDetail } from "@/api/repair/workOrder"

const TO_ACCEPT_MODE = {
  VIEW: 'view',
  EDIT: 'edit'
}

export default {
  name: "FixAllOrderDetail",
  components: {
    subTitle, ChildFixDetail, RepairInfo, RepairForm
  },
  mixins: [getNavBarHeight],
  onLoad (options) {
    this.workOrderId = options.workOrderId
    this.mode = TO_ACCEPT_MODE.VIEW
    this.init()
  },
  data () {
    return {
      mode: TO_ACCEPT_MODE.VIEW,
      //tabs
      barWidth: 350,
      tabsCurrent: 0,
      list: [{ name: "报修内容" }, { name: "维修详情" }],
      workOrderId: '',
      workOrderInfo:{}
    }
  },
  computed: {
    TO_ACCEPT_MODE() {return TO_ACCEPT_MODE}
  },
  methods: {
    init () {
      workOrderDetail(this.workOrderId).then(res => {
        this.workOrderInfo = res.data || {}
      })
    },
    //切换tab
    change (index) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.tabsCurrent = index;
    },
  },
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
